//详情页
import axios from 'axios';
import React, { Component } from 'react';
import { create_collect_action,create_cancelcollect_action,create_ahopping_action,create_cancelahopping_action  } from '../store/actionCreator'
import {connect} from 'react-redux'
import {NavBar,Toast} from 'antd-mobile'
class Aarticulars extends Component {
    constructor(props){
        super(props);
        this.state={
            item:{}
        }
    }
    componentDidMount(){
        // console.log( this.props );
        axios.post("/api/aarticulars",{id:this.props.location.state.id }).then((res)=>{
            this.setState({
                item:res.data
            })
        })
    }
    // componentDidMount(){
    //     axios.post("/api/aarticulars",{id:this.props.location.state.id}).then((res)=>{
    //         this.setState({
    //                 item:res.data
    //         })
    //     })
    //     this.unsubscribe =store.subscribe(()=>{
    //         console.log('监听变化',store.getState());
    //         this.setState({})
    //     })
    // }
    // componentWillUnmount(){
    //     this.unsubscribe();
    //     console.log("取消监听");
    // }
    handleClick(){
        var isCollected=this.props.collectList.some((item)=>{return this.state.item.id==item.id});
        if(isCollected)
        {
            this.props.cancel_collect(this.state.item);
            Toast.show({
                icon:'success',
                content:'取消收藏',
            })
        }else{
            this.props.collect(this.state.item);
            Toast.show({
                icon:'success',
                content:'收藏成功'
            })
        }
    }
    ahoppingClick(){
        var isahoppinged=this.props.ahoppingList.some((item)=>{return this.state.item.id==item.id});
        if(isahoppinged)
        {
            this.props.cancel_ahopping(this.state.item);
            Toast.show({
                icon:'success',
                content:'取消购物车',
            })
        }else{
            this.props.ahopping(this.state.item);
            Toast.show({
                icon:'success',
                content:'加入购物车'
            })
        }
    }
    render() {
        return (
            <div className="aarticulars">
                <NavBar onBack={()=>{this.props.history.goBack()}}>标题</NavBar>
                <img src={this.state.item.icon} alt="" />
                <p>{this.state.item.name}</p>
                <p>{this.state.item.price}</p>
                <div className="opes">
                    <span onClick={()=>{this.handleClick()}}>{this.props.collectList.some((item)=>{return this.state.item.id == item.id}) ? '已收藏':'收藏'  }</span>
                    <span>分享</span>
                    <span>购物车</span>
                    <span onClick={()=>{this.ahoppingClick()}} >{this.props.ahoppingList.some((item)=>{return this.state.item.id == item.id}) ? '已加入购物车':'加入购物车'  }</span>
                    <span>立即购买</span>
                </div>
            </div>
            

        );
    }
}
export default  connect((state)=>{
    // console.log('detail',state);
    return{
        collectList: state.collectList,
        ahoppingList: state.ahoppingList
    }
},(dispatch)=>{
    return {
        collect(item){
            dispatch(create_collect_action(item))
        },
        cancel_collect(item){
            dispatch(create_cancelcollect_action (item))
        },
        ahopping(item){
            dispatch(create_ahopping_action(item))
        },
        cancel_ahopping(item){
            dispatch(create_cancelahopping_action (item))
        }
    }
})(Aarticulars);